<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聘途</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>
    <style>
        .home-page {
            border: none;
            height: 1200px;
            background-image: linear-gradient(to bottom, #d1eded, white);
            background-position: to center;

        }

        .menu {
            border: none;
            height: 5%;
            background-color: #202329;
            display: flex;
            align-items: center;
            /*垂直居中*/
        }

        .menu1 {
            list-style-type: none;
            margin-left: 5%;
            overflow: hidden;
        }

        .menu2 {
            text-align: center;
            color: white;
            float: left;
            width: 140px;
            font-size: large;


        }

        .menu2:hover {
            color: #00b4b3;
        }

        .usercenter {
            list-style-type: none;
            overflow: hidden;
            float: left;
            color: rgb(255, 255, 255);
            font-size: large;
            display: flex;
            margin-left: 800px;

        }

        .usercenter:hover {
            color: #00b4b3;
        }


        .company{
            height: 280px;
            border: none;
            background-color: #38556b;

        }

        .company-job{
            position: absolute;
            margin-top: 1%;
            margin-left: 12%;
            width: 40%;
            height: 1000px;
            border: none;
           

        }

        .p1 {
            position: absolute;
            margin: 0;
        }

        .p2{
            margin-left: 100px;
            margin-top: 50px;
            font-size: 30px;
        }
        .job {
            display: flex;
            margin-left: 10%;
            margin-top: 50px;
            width: 55%;
            height: 150px;
            background-color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            border: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 15px;

        }

        .job:hover {
            color: rgb(122, 226, 205)
        }

        .image{
            margin-left: 60%;
            margin-top: 10%;
            border: none;
            width: 30%;
            height: 700px;
            background-image: url('/image/公司.jpg');
            background-size: 100% 100%;
        }


       
    </style>
</head>

<body>
    <div id="app">
        <div class="home-page">
            <div class="menu">
                <h2 style="margin-left: 10%;color: #2fdfd1;">聘途</h2>
           
                <ul class="menu1">
                    <a href="首页.html">
                        <li class="menu2">首页</li>
                    </a>
                    <a href="推荐.html">
                        <li class="menu2">推荐</li>
                    </a>
                    <a href="首页公司.html">
                        <li class="menu2">公司</li>
                    </a>
                    <a href="APP.html">
                        <li class="menu2">APP</li>
                    </a>

                </ul>

                <a href="修改密码.html">
                    <li class="usercenter"> {{ userInfo.sname }}</li>
                </a>

            </div>

            <div class="company">
                <p class="p1" style="margin-left: 18%;margin-top: 80px ;font-family: 宋体;font-size: 35px;color: white; ">
                    <b>{{CompanyInfo.cname}}</b>
                </p>
                <p class="p1" style="margin-left: 18%;margin-top: 160px ;font-family: 宋体;font-size: 27px; color: white;">
                    {{CompanyInfo.caddress}}
                </p>
                <p class="p1" style="margin-left: 30%;margin-top: 160px ;font-family: 宋体;font-size: 27px; color: white;">
                    创立于{{CompanyInfo.cyear}}年
                </p>

                <p class="p1" style="margin-left: 83%;margin-top: 215px ;font-family: 宋体;font-size: 20px;color: #00bebd;">
                   电话：{{CompanyInfo.cphone}}
                </p>
                <p class="p1" style="margin-left: 83%;margin-top: 245px ;font-family: 宋体;font-size: 20px;color: #00bebd;">
                    邮箱：{{CompanyInfo.cemail}}
                </p>


               




            </div>

            <div class="company-job">

                <p class="p2"><b>在招职位</b></p>
            

                <div v-for="jobInfo in CompanyInfo.positionList">



                    <button class="job" @click="jobdescribe(jobInfo)">
                        <p class="p1" style="margin-left: 5%;margin-top: 20px ;font-family: 宋体;font-size: 20px;">
                            <b>{{jobInfo.pname}}</b> [{{jobInfo.paddress}}]
                        </p>
                      
                        <p class="p1" style="margin-left: 5%;margin-top: 75px ;font-family: 宋体;font-size: 18px;">
                            <b style="color: rgb(0, 148, 239);">薪资 : {{jobInfo.salary}} </b>
                        </p>
                        <p class="p1" style="margin-left: 25%;margin-top: 75px ;font-family: 宋体;font-size: 18px;">
                            <b style="color: rgb(254, 69, 69);">热度 : {{jobInfo.hot}}</b>
                        </p>
                    </button>

                </div>



            </div>

            <div class="image">

            </div>

          




        </div>

    </div>

    <script>
        var userInfo = JSON.parse(sessionStorage.getItem('userData'));
        var CompanyInfo = JSON.parse(sessionStorage.getItem('CompanyInfo'));
        console.log(CompanyInfo.positionList)

       
        new Vue({
            el: '#app',
            data: {


            },
          
            methods: {
                jobdescribe(jobInfo) {
                    // 可以使用 sessionStorage 保存 jobInfo
                    sessionStorage.setItem('jobInfo', JSON.stringify(jobInfo));
                    window.location.href = "求职页面.html";

                },

            }
        })
    </script>
</body>

</html>